<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>

<body>
    <!-- #### v-for

        当需要将一个数组遍历或枚举一个对象循环显示时候，
        我常用的就是列表渲染指令v-for. 
        它需要结合着in 或者of来使用 -->
    <!-- 1. 遍历数组 -->
    <div id="app">
        <table style="border:'1'">
            <tr v-for='user in users'>
                <td>{{ user.name }}</td>
                <td>{{ user.age }}</td>
                <td>删除</td>
            </tr>
        </table>
        <br>
        <table style="border:'1'">
            <tr v-for='(user,index) in users'>
                <td>{{index + 1}}</td>
                <td>{{ user.name }}</td>
                <td>{{ user.age }}</td>
                <td>删除</td>
            </tr>
        </table>
        <!-- 2.遍历对象 -->
        <ol>
            <li v-for="let in student">{{let}}</li>

        </ol>
        <!-- 还可以添加第二个参数，表示属性名 -->
        <ol>
            <li v-for="(let,key) in student">{{key}}--{{let}}</li>

        </ol>
        <!-- 还可以添加第三个参数，表示属性对应的下标 -->
        <ol>
            <li v-for="(let,key,index) in student">{{index}}--{{key}}--{{let}}</li>

        </ol>
        <!-- 3.遍历数字 -->
        <ul>
            <li v-for="n in 10">{{n}}</li>

        </ul>
    </div>



    <script>
        //创建Vue对象
        let vue = new Vue({
            el: "#app",
            data: {
                users: [{
                    name: '张三',
                    age: 12
                }, {
                    name: '李四',
                    age: 14
                }, {
                    name: '王五',
                    age: 33
                }],
                student: {
                    name: "李寻欢",
                    age: 20
                }
            }
        });
    </script>
</body>

</html>